import React from 'react'
import { Row, Col } from 'antd'
import { Link } from 'react-router-dom'
import { store } from '../../store/store'
import Tloader from 'react-touch-loader'

class MobileList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      news: '',
      increase: 5,
      hasMore: 0,
      initializing: 1,
      refreshedAt: Date.now()
    }
  }

  componentWillMount() {
    const type = this.props.type
    const count = this.props.count
    store.getNews(type, count)
      .then(news => {
        this.setState({
          news
        })
      })
  }

  loadMore = (resolve) => {
    const type = this.props.type
    const count = this.props.count + this.state.increase
    const increase = this.state.increase
    this.setState({
      increase: increase + 5
    })
    setTimeout(() => {
      store.getNews(type, count)
        .then(news => {
          this.setState({
            news
          })
        })
      this.setState({
        hasMore: count > 0 && count < 50
      })
      resolve();
    }, 2e3)
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({
        hasMore: 1,
        initializing: 2
      })
    }, 2e3)
  }

  render() {
    const { news, initializing, hasMore } = this.state
    const newsList = news.length
      ? (
        news.map((newsItem, index) => {
          return (
            <section key={index} className="m_article list-item special_section clearfix">
              <Link to={`detail/${newsItem.uniquekey}`}>
                <div className='m_article_img'>
                  <img src={newsItem.thumbnail_pic_s} alt='' />
                </div>
                <div className='m_article_info'>
                  <div className='m_article_title'>
                    <span>{newsItem.title}</span>
                  </div>
                  <div className='m_article_desc claerfix'>
                    <span className='m_article_channel'>{newsItem.realtype}</span>
                    <span className='m_article_time'>{newsItem.date}</span>
                  </div>
                </div>
              </Link>
            </section>
          )
        })
      )
      : (
        <span>没有加载任何消息</span>
      );
    return (
      <Row>
        <Col span={24}>
          <Tloader className='main'
            onLoadMore={this.loadMore}
            hasMore={hasMore}
            initializing={initializing}
          >
            {newsList}
          </Tloader>
        </Col>
      </Row>
    )
  }
}

export default MobileList